import { Canvas, Story, Meta } from "@storybook/blocks";
import { Icon } from "metabase/ui";
import { Stack, TextInput } from "metabase/ui";
import * as TextInputStories from "./TextInput.stories";

<Meta of={TextInputStories} />

# TextInput

Our themed wrapper around [Mantine TextInput](https://v6.mantine.dev/core/text-input/).

## Docs

- [Figma File](https://www.figma.com/file/oIZhYS5OoRA7twd4KqN4Eu/Input-%2F-Text?type=design&node-id=1-96&mode=design&t=yaNljw178EFJeU7k-0)
- [Mantine TextInput Docs](https://v6.mantine.dev/core/text-input/)

## Examples

<Canvas>
  <Story of={TextInputStories.Default} />
</Canvas>

### Size - md

<Canvas>
  <Story of={TextInputStories.EmptyMd} />
</Canvas>

#### Filled

<Canvas>
  <Story of={TextInputStories.FilledMd} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={TextInputStories.AsteriskMd} />
</Canvas>

#### Description

<Canvas>
  <Story of={TextInputStories.DescriptionMd} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={TextInputStories.DisabledMd} />
</Canvas>

#### Error

<Canvas>
  <Story of={TextInputStories.ErrorMd} />
</Canvas>

#### Icon

<Canvas>
  <Story of={TextInputStories.IconMd} />
</Canvas>

#### Right section

<Canvas>
  <Story of={TextInputStories.RightSectionMd} />
</Canvas>

#### Read only

<Canvas>
  <Story of={TextInputStories.ReadOnlyMd} />
</Canvas>

### Size - xs

<Canvas>
  <Story of={TextInputStories.EmptyXs} />
</Canvas>

#### Filled

<Canvas>
  <Story of={TextInputStories.FilledXs} />
</Canvas>

#### Asterisk

<Canvas>
  <Story of={TextInputStories.AsteriskXs} />
</Canvas>

#### Description

<Canvas>
  <Story of={TextInputStories.DescriptionXs} />
</Canvas>

#### Disabled

<Canvas>
  <Story of={TextInputStories.DisabledXs} />
</Canvas>

#### Error

<Canvas>
  <Story of={TextInputStories.ErrorXs} />
</Canvas>

#### Icon

<Canvas>
  <Story of={TextInputStories.IconXs} />
</Canvas>

#### Right section

<Canvas>
  <Story of={TextInputStories.RightSectionXs} />
</Canvas>

#### Read only

<Canvas>
  <Story of={TextInputStories.ReadOnlyXs} />
</Canvas>
